<template>
    <div class="wrap">
        <div id="container">
            <section class="detail-header">
                <div class="col-sm-12 console-title">
                    <h5 class=""><span class="title">全部消息</span><router-link class="btn btn-xs btn-toBack"  :to="'/msg/index/all/'">返回上一级</router-link></h5>
                </div>
            </section>
            <div class="mainDiv message-detail-container console-box-border margin-top-3 row-padding col-padding">
                <div class="detail-title text-center">
                    <h4>{{msg.title}}</h4>
                    <div>{{msg.createTimeStr}}</div>
                </div>
                <div class="detail-content breakAll">
                    <div class="console-title-border"></div>
                    <div>{{msg.context}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { readMsg, getNoReadMsgList } from '@/api/msgCenterData'

export default {
  data() {
    return {
      msg: '',
      id: this.$route.params.rid
    }
  },
  created() {
    this.readMsg()
  },
  methods: {
    readMsg() {
      var listQuery = { msgId: this.id, isRead: true }
      readMsg(listQuery).then(response => {
        this.msg = response.data
        getNoReadMsgList(listQuery).then(response => {
          this.$store.commit('changeMsg', {
            msgTotal: response.data.totals,
            msgData: response.data.data
          })
        })
      })
    }
  }
}
</script>

<style lang="scss">
.detail-header{
    padding: 0 15px;
    margin-bottom: 10px;
    overflow: hidden;
    .console-title{
        padding: 16px 0px;
        min-height: 70px;
        border-bottom: 1px solid #eee;
        position: relative;
        h5{
            display: inline-block;
            text-indent: 8px;
            border-left: 2px solid #88B7E0;
            margin: 8px 0;
            margin-right: 8px;
            vertical-align: top;
            .title{padding: 0 10px;}
            .btn-xs{
                font-size: 12px;
                padding: 2px 8px;
                height: 20px;
                line-height: 14px;
            }
        }
    }
}

.btn-toBack{
  border: 1px solid #BBB;
  color: #666;
  text-shadow: none;
  vertical-align: middle;
  margin-top: 7px;
}
.mainDiv{
  margin: 15px;
  padding: 16px 74px;
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 20px;
  border: 1px solid #E1E6EB;
  .text-center {
    text-align: center;
  }
  h4{
    font-size: 18px;
  }
  .breakAll {
    word-break: break-all;
    word-wrap: break-word;
  }
  .console-title-border {
    border-bottom: 1px solid #DDD;
    margin: 16px;
  }
}
ul, li {
    padding: 0;
    margin: 0;
    list-style: none;
}

</style>


